<template>
  <main>
    <el-row :gutter="20">
      <el-col :span="16"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <div id="dayOrder" style="height: 300px"></div>
          </el-card></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <div id="totalOrder" style="height: 300px"></div>
          </el-card></div
      ></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <div id="warehouse" style="height: 300px"></div>
          </el-card></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <div id="store" style="height: 300px"></div>
          </el-card></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <div id="goods" style="height: 300px"></div>
          </el-card></div
      ></el-col>
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
      <el-col :span="16"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content ep-bg-purple">
          <el-card style="" shadow="hover">
            <p v-for="o in 4" :key="o" class="text item">
              {{ "List item " + o }}
            </p>
          </el-card>
        </div></el-col
      >
    </el-row> -->
  </main>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
import {
  dailyOrderCountApi,
  totalOrderCountApi,
  totalWarehouseCountApi,
  totalStoreCountApi,
  totalGoodsCountApi,
} from "@/api/infoApi";
type EChartsOption = echarts.EChartsOption;

var dayOrder: EChartsOption;
var totalOrder: EChartsOption;
var warehouse: EChartsOption;
var store: EChartsOption;
var goods: EChartsOption;
dayOrder = reactive({
  title: {
    text: "日订单量",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["订单量"],
  },
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "订单量",
      stack: "Total",
      data: [],
      type: "line",
    },
  ],
});
totalOrder = reactive({
  title: {
    text: "总订单数",
  },
  tooltip: {
    trigger: "item",
  },
  xAxis: {
    type: "category",
    data: ["订单数量"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [],
      itemStyle: {
        color: "#3385ff",
      },
      type: "bar",
    },
  ],
});
warehouse = reactive({
  title: {
    text: "仓库数量",
  },
  tooltip: {
    trigger: "item",
  },
  xAxis: {
    type: "category",
    data: ["仓库数量"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [120],
      itemStyle: {
        color: "#4a9caa",
      },
      type: "bar",
    },
  ],
});
store = reactive({
  title: {
    text: "门店数量",
  },
  tooltip: {
    trigger: "item",
  },
  xAxis: {
    type: "category",
    data: ["门店数量"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [120],
      itemStyle: {
        color: "#5aae5a",
      },
      type: "bar",
    },
  ],
});
goods = reactive({
  title: {
    text: "商品数量",
  },
  tooltip: {
    trigger: "item",
  },
  xAxis: {
    type: "category",
    data: ["商品数量"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [120],
      itemStyle: {
        color: "#d99a1c",
      },
      type: "bar",
    },
  ],
});
const dailyOrderCount = () => {
  return dailyOrderCountApi().then((res: any) => {
    // 确保类型断言安全
    const xAxisData = res.data.map((item: any) => item.date);
    const seriesData = res.data.map((item: any) => item.order_count);

    // 更新响应式数据
    dayOrder.xAxis = {
      ...dayOrder.xAxis,
      data: xAxisData,
    };

    dayOrder.series = [
      {
        ...dayOrder.series![0],
        data: seriesData,
      },
    ];
  });
};
const totalOrderCount = () => {
  return totalOrderCountApi().then((res: any) => {
    console.log(res.data);

    const totalcout = [res.data];
    totalOrder.series = [
      {
        ...totalOrder.series![0],
        data: totalcout,
      },
    ];
  });
};

const totalWarehouseCount = () => {
  return totalWarehouseCountApi().then((res: any) => {
    console.log(res.data);

    const totalcout = [res.data];
    warehouse.series = [
      {
        ...warehouse.series![0],
        data: totalcout,
      },
    ];
  });
};

const totalStoreCount = () => {
  return totalStoreCountApi().then((res: any) => {
    console.log(res.data);

    const totalcout = [res.data];
    store.series = [
      {
        ...store.series![0],
        data: totalcout,
      },
    ];
  });
};

const totalGoodsCount = () => {
  return totalGoodsCountApi().then((res: any) => {
    console.log(res.data);

    const totalcout = [res.data];
    goods.series = [
      {
        ...goods.series![0],
        data: totalcout,
      },
    ];
  });
};
onMounted(async () => {
  await dailyOrderCount();
  await totalOrderCount();
  await totalWarehouseCount();
  await totalStoreCount();
  await totalGoodsCount();
  var dayOrderChart = echarts.init(document.getElementById("dayOrder"));
  var totalOrderChart = echarts.init(document.getElementById("totalOrder"));
  var warehouseChart = echarts.init(document.getElementById("warehouse"));
  var storeChart = echarts.init(document.getElementById("store"));
  var goodsChart = echarts.init(document.getElementById("goods"));
  dayOrderChart.setOption(dayOrder);
  totalOrderChart.setOption(totalOrder);
  warehouseChart.setOption(warehouse);
  storeChart.setOption(store);
  goodsChart.setOption(goods);
});
</script>

<style scoped>
.el-card {
  height: 300px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  height: 300px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
